<template>
  <div class="child">
    <!-- 我是组件一号 -->
    <!-- 遍历生成p标签展示所有科目 -->
    <!-- <p v-for="(item, index) in list" :key="item" @click="add(index)">{{ item }} 点击count += {{ index + 1 }}</p>
    <p v-for="(item, index) in ourlist" :key="item" @click="sub(index)">{{ item }} 点击count -= {{ index + 1 }}</p>-->
    <h3>访问子模块</h3>
    <p>
      这是数据title:
      <span>{{ $store.state.user.title }}</span>
    </p>
    <p>点击展示标题:</p>
    <span @click="onClickShowTitle">请点击</span>
    <em v-for="(value, key) in userInfo" :key="key">{{ key + ': ' + value }}</em>
    <h3>展示: {{ title }}</h3>
    <input type="text" :value="title" @input="onChangeTitle" />
    <span @click="changeTitle('你的心不会痛吗')">点击修改标题</span>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex' // 引入mapState映射辅助函数
export default {
  name: 'son1View',
  data () {
    return {
      list: ['语文', '数学', '历史'],
      ourlist: ['地理', '教育', '体育']
    }
  },
  methods: {
    add (index) {
      // this.$store.state.count += index + 1
      // console.log(this.$store.state.count)
      this.$store.commit('changeCount', index + 1)
      // this.$store.state.add()
    },
    sub (index) {
      this.$store.commit('changeCount', -index - 1)
    },
    onClickShowTitle (e) {
      console.log(e.target.textContent)
      // 将仓库里面的title更换上去
      e.target.textContent = this.$store.state.user.title
    },
    onChangeTitle (e) {
      this.$store.commit('user/changeTitle', e.target.value.trim())
    },
    // 映射user子模块的函数
    ...mapMutations('user', ['changeTitle'])
  },
  computed: {
    // 映射user子模块的数据
    ...mapState('user', ['title', 'userInfo'])
  }
}
</script>

<style>
</style>
